<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form style="height:100%;">
                    <div class="formSolution">
                        <!--按钮 -->
                        <div>
                            <a-form-item :labelCol1="6" :wrapperCol1="18" :label="i18n('list.mode','模式')">
                                <a-radio-group v-model="mode">
                                    <a-radio value="easy">
                                        {{ i18n('list.easy', '简易模式') }}
                                    </a-radio>
                                    <a-radio value="hard">
                                        {{ i18n('list.hard', '高级模式') }}
                                    </a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                        <!--内容-->
                        <div class="formSolution-center" :class="[mode=='easy'?'formSolution-center-flex':'']">
                            <div v-if="mode=='easy'" class="FormSolutionDefMappingConfig-easy">
                                <rx-condition-group ref="easyCondition" :ruleData="easyCondition" :defaultRule="defaultRule" :level="2">
                                    <template slot="conditionDiv" slot-scope="{rule}">
                                        <div style="display:flex;">
                                            <div class="findSelectBox">
                                                <a-select :getPopupContainer="p=>p.parentNode"
                                                          :placeholder="i18n2('conditionCon.field','字段')"
                                                          v-model="rule.formField"
                                                          allowClear
                                                          @change="formFieldChange($event,rule)"
                                                          :options="formFields"/>
                                            </div>
                                            <div class="findSelectBox" v-if="rule.isSingle===0">
                                                <a-select v-model="rule.fieldValue">
                                                    <a-select-option value="value">{{$comi18('listDef.val', '值')}}</a-select-option>
                                                    <a-select-option value="label">{{$ti18('rxForm.name', '名称')}}</a-select-option>
                                                </a-select>
                                            </div>
                                            <div class="findSelectBox">
                                                <a-select :getPopupContainer="p=>p.parentNode"
                                                          :placeholder="i18n2('conditionCon.comparison','比较符')"
                                                          v-if="rule.dataType=='number' || rule.dataType=='int'"
                                                          v-model="rule.op"
                                                          :options="numOptions"/>
                                                <a-select :getPopupContainer="p=>p.parentNode"
                                                          :placeholder="i18n2('conditionCon.comparison','比较符')"
                                                          v-else-if="rule.dataType=='date'" v-model="rule.op"
                                                          :options="dateOptions"/>
                                                <a-select :getPopupContainer="p=>p.parentNode" v-else
                                                          :placeholder="i18n2('conditionCon.comparison','比较符')"
                                                          v-model="rule.op"
                                                          :options="strOptions"/>
                                            </div>
                                            <div class="findInputBox">
                                                <a-input-number v-if="rule.dataType=='number' || rule.dataType=='int'"
                                                                :min="0"
                                                                v-model="rule.conditionConfig"
                                                                :placeholder="i18n2('conditionCon.condition','条件')" />
                                                <a-date-picker v-else-if="rule.dataType=='date'"
                                                               format="YYYY-MM-DD"
                                                               value-format="YYYY-MM-DD"
                                                               v-model="rule.conditionConfig"
                                                               :getCalendarContainer="p=>p.parentNode"/>
                                                <a-input v-else
                                                         v-model="rule.condition"
                                                         :placeholder="i18n2('conditionCon.condition','条件')" />

                                            </div>
                                        </div>
                                    </template>
                                </rx-condition-group>
                            </div>
                            <div v-if="mode=='hard'" class="rx-monaco-editor-center" style="margin-right: 20px">
                                <div style="padding: 2px 2px 2px 2px"></div>
                                <rx-monaco-editor ref="javaCode"
                                                  v-model="javaCode"
                                                  language="javascript">
                                    <template v-slot:monacoeditor>
                                        <div style="display: flex;align-items: center">
                                            <div class="form-tree-certen">
                                                <a-button style="margin-right: 8px;width: 170px">
                                                    {{ i18n('insertField', '插入表单字段') }}
                                                    <a-icon type="down"/>
                                                </a-button>
                                                <div class="form-tree">
                                                    <a-input-search v-model="search"
                                                                    style="margin-bottom: 8px;width: 150px;margin-left: 10px"
                                                                    :placeholder="i18n('enterField', '输入搜索字段')"
                                                                    @pressEnter="pressEnter(search)"
                                                                    @search="pressEnter(search)"
                                                                    allowClear
                                                                    @change="pressEnter(search)"/>
                                                    <a-tree
                                                        :multiple="false"
                                                        :show-icon="false"
                                                        :treeData="boData"
                                                        @select="selectBoNode"
                                                    ></a-tree>
                                                </div>
                                            </div>
                                            <a-dropdown>
                                                <a-menu slot="overlay">
                                                    <a-menu-item @click="selectBoNodeList(item)"
                                                                 v-for="item in boDataList" :key="item.key">
                                                        {{ item.title }}
                                                    </a-menu-item>
                                                </a-menu>
                                                <a-button style="margin-right: 8px">{{ i18n('insertContext', '插入上下文') }}
                                                    <a-icon type="down"/>
                                                </a-button>
                                            </a-dropdown>
                                        </div>
                                    </template>
                                </rx-monaco-editor>
                            </div>
                        </div>
                    </div>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxDialog, RxLayout, Util, RxGrid, RxMonacoEditor,RxConditionGroup} from "@lowcode/jpaas-common-lib";
import formBoAttr from "@/api/form/bo/formBoAttr";

export default {
    name: "FormTranConditionConfig",
    components: {
        RxDialog,
        RxLayout,
        RxGrid,
        RxMonacoEditor,
        RxConditionGroup
    },
    props: ["layerid", "destroy", "config", "boDefId" , "bodefAlias","entId"],
    data() {
        return {
            mode: "easy",
            easyCondition:{
                condition:"AND",
                rules:[],
            },
            defaultRule:{
                formField:undefined,
                op:undefined,
                conditionConfig:"",
                dataType:"",
                isSingle:"",
            },
            formFields: [],
            boData: [],
            boDataInit: [],
            boDataList: [{key: 'type', name: 'type', title: this.i18n('boData.formType', '表单类型'), isField: true},
                {key: 'curUserId', name: 'curUserId', title: this.i18n('boData.curUserId', '用户ID'), isField: true},
                {
                    key: 'curUserName',
                    name: 'curUserName',
                    title: this.i18n('boData.curUserName', '用户名称'),
                    isField: true
                },
                {key: 'account', name: 'account', title: this.i18n('boData.account', '用户账号'), isField: true},
                {key: 'deptId', name: 'deptId', title: this.i18n('boData.deptId', '用户主部门ID'), isField: true},
                {key: 'instId', name: 'instId', title: this.i18n('boData.instId', '流程实例ID'), isField: true}],
            javaCode: '',
            strOptions: [
                {value: 'EQ', label: this.i18n('strOptions.eq', '等于')},
                {value: 'NEQ', label: this.i18n('strOptions.noeq', '不等于')},
                {value: 'IN', label: this.i18n('strOptions.include', '包含')},
                {value: 'NIN', label: this.i18n('strOptions.notInclude', '不包含')}
            ],
            numOptions: [
                {value: 'EQ', label: this.i18n('strOptions.eq', '等于')},
                {value: 'NEQ', label: this.i18n('strOptions.noeq', '不等于')},
                {value: 'LT', label: this.i18n('strOptions.under', '小于')},
                {value: 'LE', label: this.i18n('strOptions.leq', '小于等于')},
                {value: 'GT', label: this.i18n('strOptions.overtake', '大于')},
                {value: 'GE', label: this.i18n('strOptions.geq', '大于等于')
                }],
            dateOptions: [
                {value: 'EQ', label: this.i18n('strOptions.eq', '等于')},
                {value: 'LT', label: this.i18n('strOptions.under', '小于')},
                {value: 'GT', label: this.i18n('strOptions.overtake', '大于')}
            ],
            search: '',
            //默认的标准字段
            defField:[
                {label:this.i18n2('defaultField.REF_ID_','外键'),value:"REF_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.PARENT_ID_','父ID'),value:"PARENT_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.COMPANY_ID_','公司ID'),value:"COMPANY_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.TENANT_ID_','机构ID'),value:"TENANT_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.CREATE_BY_','创建人ID'),value:"CREATE_BY_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.UPDATE_BY_','更新人ID'),value:"UPDATE_BY_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.CREATE_DEP_ID_','创建部门ID'),value:"CREATE_DEP_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.CREATE_TIME_','创建时间'),value:"CREATE_TIME_",isSingle: 1,dataType:"date"},
                {label:this.i18n2('defaultField.UPDATE_TIME_','更新时间'),value:"UPDATE_TIME_",isSingle: 1,dataType:"date"},
                {label:this.i18n2('defaultField.INST_ID_','流程实例ID'),value:"INST_ID_",isSingle: 1,dataType:"varchar"},
                {label:this.i18n2('defaultField.INST_STATUS_','流程实例状态'),value:"INST_STATUS_",isSingle: 1,dataType:"number"},
            ],
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoDef", key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "formTransConfig", key);
        },
        i18nSol(name, text, key) {
            return this.$ti18(name, text, "formSolution.buttonDef", key);
        },
        init() {
            if (this.config) {
                var json = JSON.parse(this.config);
                this.mode = json.mode;
                if (this.mode == 'easy') {
                    this.easyCondition = json.easyCondition;
                } else if (this.mode == 'hard') {
                    this.javaCode = json.javaCode;
                }
            }
            if (this.entId) {
                formBoAttr.getByEntId(this.entId).then(res => {
                    this.buildField(res)
                })
            }
        },
        buildField(res) {
            this.formFields = [];
            if (res) {
                let fieldMap = res.map(item => {
                    let name = item.fieldName ? item.fieldName : item.name
                    return {
                        label: item.comment,
                        value: name.toUpperCase(),
                        isSingle: item.isSingle,
                        dataType: item.dataType
                    }
                });
                this.formFields = fieldMap.concat(this.defField)
                let boData = res.map(item => {
                    let name = item.fieldName ? item.fieldName : item.name
                    return {
                        title: item.comment,
                        key: name.toUpperCase(),
                        name: name.toUpperCase(),
                        isSingle: 1,
                        isField: true,
                    }
                })
                let defaultFields = this.defField.map(item => {
                    return {
                        title: item.label,
                        key: item.value,
                        name: item.value,
                        isSingle: item.isSingle,
                        isField: true,
                    }

                })
                this.boData.push({
                    key: "formJson",
                    name: "formJson",
                    title: this.i18n2('conditionCon.formJson',"表单数据"),
                    isField: false,
                    children: boData.concat(defaultFields)
                });
                this.boDataInit = JSON.parse(JSON.stringify(this.boData));
            }
        },
        handleSubmit() {
            Util.closeWindow(this, "ok", this.getData());
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        getData() {
            var obj = {mode: this.mode};
            if (this.mode == 'easy') {
                obj.easyCondition = this.easyCondition;
            } else if (this.mode == 'hard') {
                obj.javaCode = this.javaCode;
            }
            return JSON.stringify(obj);
        },
        formFieldChange(value, record) {
            if (!value) {
                return;
            }
            for (var i = 0; i < this.formFields.length; i++) {
                if (value == this.formFields[i].value) {
                    record.dataType = this.formFields[i].dataType;
                    record.isSingle = this.formFields[i].isSingle;
                    if (record.isSingle === 0) {
                        this.$set(record, "fieldValue", "value");
                    } else {
                        record.fieldValue = "";
                    }
                    break;
                }
            }
            this.$set(record, "conditionConfig", "");
            this.$set(record, "op", undefined);
        },
        selectBoNode(selKeys, e) {
            let node = e.node.dataRef;
            var isField = node.isField;
            var type = node.type;
            if (!isField) {
                return;
            }
            let parentNode = e.node.$parent.dataRef;
            if (!type || type == 'main') {
                this.insertJavaCode(parentNode.name + "." + node.name);
            } else if (type == 'onetoone') {
                this.insertJavaCode(parentNode.name + "." + "sub__" + node.entName + "." + node.name);
            } else if (type == 'onetomany') {
                this.insertJavaCode(parentNode.name + "." + "sub__" + node.entName + "[0]." + node.name);
            }
        },
        insertJavaCode(text) {
            this.$refs.javaCode.insertContent(text);
        },
        selectBoNodeList(node) {
            this.insertJavaCode("context." + node.name);
        },
        //搜索
        pressEnter: _.debounce(function (e) {
            this.boData = JSON.parse(JSON.stringify(this.boDataInit));
            if (e) {
                this.boData[0].children = this.boData[0].children.filter(res => {
                    //子表
                    if (res.children) {
                        res.children = this.onetoone(res.children)
                        if (res.children.length > 0) {
                            return res;
                        }
                    } else {
                        return res.title.includes(this.search)
                    }
                })
            }
        }, 500),
        onetoone(list) {
            list = list.filter(item => {
                if (item.title.includes(this.search)) {
                    return true
                } else {
                    return false
                }
            })
            return list
        },
    }
}
</script>

<style scoped>
.form-tree-certen {
    position: relative;
}

.form-tree-certen:hover .form-tree {
    display: block;
}

.form-tree {
    position: absolute;
    top: 44px;
    display: none;
    left: 0px;
    min-width: 170px;
    max-height: 300px;
    overflow: auto;
    z-index: 1000;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #e3e3e3;
}

.FormSolutionDefMappingConfig-easy {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rx-monaco-editor-center {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.formSolution {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.addbutton {
    margin-bottom: 15px;
}

.formSolution-center {
    height: 100%;
    display: flex;
    flex: 1;
}

.formSolution-center-flex {
    flex-direction: column;
}

.findSelectBox{
    flex: 1;
    margin-right: 20px;
}
.findInputBox{
    flex: 2;
}
</style>